<template>
  <div>
    <Card dis-hover>
      <Form ref="queryForm">
        <Row style="margin-bottom:10px;">
          <Col span="24" style="text-align: right;">
            <Button icon="md-checkmark" type="info" @click="setAllRead"
                    style="margin-right:10px;">标记所有通知为已读
            </Button>
            <Button icon="ios-trash" type="warning" @click="batchDelete" style="margin-right:10px;">批量删除</Button>
            <Button icon="md-search" type="success" @click="getPage">搜索</Button>
          </Col>
        </Row>
        <Row :gutter="16">
          <Col span="24">
            <FormItem prop="state" style="width:100%;">
              <Select v-model="pageRequest.state" filterable clearable
                      placeholder="选择阅读状态" @on-clear="handleClear">
                <Option :key="1" label="已读" value="1">
                  <Icon type="md-checkmark-circle" :size="16" :color="$config.color.success"></Icon>
                  <span style="margin-left:8px;">已读</span></Option>
                <Option :key="2" label="未读" value="0">
                  <Icon type="md-close-circle" :size="16" :color="$config.color.warning"></Icon>
                  <span style="margin-left:8px;">未读</span></Option>
              </Select>
            </FormItem>
          </Col>
        </Row>
      </Form>
      <Table :loading="loading" :columns="columns" no-data-text="没有任何数据" no-filtered-data-text="没有任何数据" border
             :data="list" class="margin-top-10" @on-row-dblclick="display" @on-selection-change="selectionChange">
        <template slot-scope="{row}" slot="state">
          <Tag color="success" v-if="row.state===1">已读</Tag>
          <Tag color="warning" v-if="row.state===0">未读</Tag>
        </template>
        <template slot="actions" slot-scope="{row}">
          <Dropdown placement="bottom-end" transfer @on-click="handleClickActionDropdown">
            <Button size="small" type="primary">
              操作
              <Icon type="ios-arrow-down"></Icon>
            </Button>
            <DropdownMenu slot="list">
              <DropdownItem :name="JSON.stringify({row:row,name:'read'})" :disabled="row.state===1">已读</DropdownItem>
              <DropdownItem :name="JSON.stringify({row:row,name:'delete'})" divided>删除</DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </template>
      </Table>
      <Page show-sizer show-total :total="totalCount" class="margin-top-10" @on-change="pageChange"
            @on-page-size-change="pageSizeChange" :page-size="pageSize" :current="currentPage"
            :page-size-opts="[10,20,30,40]">

      </Page>
    </Card>
    <notification-modal v-if="notificationModalMount" v-model="notificationModalShow"
                        :modal-data="notificationData"></notification-modal>
  </div>
</template>

<script lang="ts">
import {Component, Vue, Prop, Watch, Emit} from 'vue-property-decorator';
import AbpBase from '@/lib/abpbase';
import PageRequest from '@/store/entities/page-request';
import Util from '@/lib/util';
import Notify from '@/lib/notify';
import NotificationModal from '@/views/other/notification/modal/notification-modal.vue';

class PageNotificationRequest extends PageRequest {
  state: number;
}

@Component({
  components: {
    NotificationModal,
  },
})
export default class Notification extends AbpBase {
  name: string = 'Notification';

  pageRequest: PageNotificationRequest = new PageNotificationRequest();

  notificationModalMount: boolean = false;
  notificationModalShow: boolean = false;
  notificationData: any = {};

  selection: any[] = [];

  columns = [
    {
      type: 'selection',
      width: 60,
      align: 'center',
    },
    {
      title: '阅读状态',
      key: 'state',
      slot: 'state',
      align: 'center',
      width: 120,
    },
    {
      title: '通知标题',
      key: 'title',
      align: 'center',
      render: (h, params) => {
        return h('a', {
          attrs: {
            href: 'javascript:void(0);',
          },
          style: {
            fontWeight: params.row.state === 0 ? 'bolder' : 'normal',
          },
          on: {
            click: () => {
              this.display(params.row);
            },
          },
        }, Notify.message(params.row).title);
      },
    },
    {
      title: '创建时间',
      key: 'creationTime',
      align: 'center',
      width: 180,
      render: (h, params) => {
        return h('span', {
          style: {
            fontWeight: params.row.state === 0 ? 'bolder' : 'normal',
          },
        }, Util.getTime(params.row.notification.creationTime));
      },
    },
    {
      title: '操作',
      width: 110,
      slot: 'actions',
      align: 'center',
    },
  ];

  get list() {
    return this.$store.state.notification.list;
  }

  get loading() {
    return this.$store.state.notification.loading;
  }

  get pageSize() {
    return this.$store.state.notification.pageSize;
  }

  get currentPage() {
    return this.$store.state.notification.currentPage;
  }

  get totalCount() {
    return this.$store.state.notification.totalCount;
  }

  get unreadCount() {
    return this.$store.state.notification.unreadCount;
  }

  batchDelete() {
    this.$M.confirm({
      title: '系统提示',
      content: '确定要批量删除这些通知吗？',
      onOk: async () => {
        await this.$store.dispatch({
          type: 'notification/batchDeleteNotifications',
          data: this.selection.map(item=>item.id),
        });
        this.$Message.success({
          background: true,
          content: '通知已批量删除成功',
          duration: this.$config.duration,
        });
        await this.getPage();
      },

      onCancel: () => {
      },
    });
  }

  selectionChange(selection) {
    this.selection = selection;
  }

  async handleClickActionDropdown(name: string) {
    const temp: any = JSON.parse(name);
    switch (temp.name) {
      case 'read':
        await this.update(temp.row);
        break;
      case 'delete':
        await this.remove(temp.row);
        break;
    }
  }

  async update(row: any) {
    await this.$store.dispatch({
      type: 'notification/setNotificationAsRead',
      data: {
        id: row.id,
      },
    });
    this.$Message.success({
      background: true,
      content: '已成功将通知标记为已读',
      duration: this.$config.duration,
    });
    await this.getPage();
  }

  handleClear() {
    this.getPage();
  }

  async remove(row: any) {
    this.$M.confirm({
      title: '系统提示',
      content: '确定要删除这个通知吗？',
      onOk: async () => {
        await this.$store.dispatch({
          type: 'notification/deleteNotification',
          data: row,
        });
        this.$Message.success({
          background: true,
          content: '通知已删除成功',
          duration: this.$config.duration,
        });
        await this.getPage();
      },

      onCancel: () => {
      },
    });
  }

  async setAllRead() {
    await this.$store.dispatch({
      type: 'notification/setAllNotificationsAsRead',
    });
    this.$Message.success({
      background: true,
      content: '已成功将所有通知标记为已读',
      duration: this.$config.duration,
    });
    await this.getPage();
  }

  async pageChange(page: number) {
    this.$store.commit('notification/setCurrentPage', page);
    await this.getPage();
  }

  async pageSizeChange(pageSize: number) {
    this.$store.commit('notification/setPageSize', pageSize);
    await this.getPage();
  }

  async getPage() {
    this.pageRequest.maxResultCount = this.pageSize;
    this.pageRequest.skipCount = (this.currentPage - 1) * this.pageSize;
    await this.$store.dispatch({
      type: 'notification/getUserNotifications',
      data: this.pageRequest,
    });
  }

  async display(row: any) {
    this.notificationData = row;
    this.notificationModalMount = true;
    this.$nextTick(() => {
      this.notificationModalShow = true;
    });
    await this.$store.dispatch({
      type: 'notification/setNotificationAsRead',
      data: {
        id: row.id,
      },
    });
    this.$store.commit('notification/reduceUnread', row);
  }

  async created() {
    await this.getPage();
  }
}
</script>

<style lang="less" scoped>

</style>
